<template>
	<view class="bgw box-radius u-p-l-28 u-p-r-28 u-font-24">
		<view class="u-flex u-border-bottom u-p-t-20 u-p-b-20 u-col-top u-m-b-15">
			<view class="u-flex-1">
				<view class="u-tips-color u-m-b-10">
					订单号：{{detail.house_order_sn}}
				</view>
				<view class="u-tips-color">
					房源编号：{{detail.house_sn}}
				</view>
			</view>
			<view class="color-primary">
				{{detail.status_label}}
			</view>
		</view>
		<view class="u-m-b-15">
			<text class="u-font-28">{{detail.house_title}}</text>
			<text class="u-font-24">（{{detail.min_area_title}}）</text>
		</view>
		<view class="u-p-b-15">
			<template v-if="detail.house_type == 1">
				<view class=" u-p-b-10 u-content-color" v-if="detail.dong_sn||detail.unit_sn||detail.layer_sn||detail.house_sn">
					具体地址：{{detail.dong_sn}}栋{{detail.unit_sn}}单元{{detail.layer_sn}}层{{detail.house_sn}}
				</view>
				<view class=" u-p-b-10 u-content-color" v-if="detail.addr">
					具体地址：{{detail.addr}}
				</view>
			</template>
			<view class=" u-p-b-10 u-content-color" v-if="detail.house_type == 2">
				具体地址：{{detail.province}}{{detail.city}}{{detail.district}} {{detail.addr}}
			</view>
			<view class="u-p-b-10 u-content-color">
				<text>成交价：</text>
				<text class="color-orange" v-if="detail.chengjiao_price">￥{{Number(detail.chengjiao_price)}}万</text>
				<text class="u-p-l-30">身份：{{detail.order_user_type_label}}</text>
				<text class="u-p-l-30">类型：{{detail.house_type == 1 ?'二手房':detail.house_type == 2 ?'新房':''}}</text>
			</view>
			<view class="u-p-b-10 u-content-color">
				<text>定金：</text>
				<text class="color-orange">￥{{Number(detail.dingjin_price)||''}}</text>
				<text class="u-tips-color" v-if="detail.is_need_pay_dingjin == 1">（待支付）</text>
				<text class="u-p-l-30">服务费：</text>
				<template v-if="detail.order_user_type_id == 1">
					<text class="color-orange">￥{{Number(detail.buy_service_price)||''}}</text>
					<text class="u-tips-color" v-if="detail.is_need_pay_buy_other_price == 1">（待支付）</text>
				</template>
				<template v-if="detail.order_user_type_id == 2">
					<text class="color-orange">￥{{Number(detail.sell_service_price)}}</text>
					<text class="u-tips-color" v-if="detail.is_need_pay_sell_service_price == 1">（待支付）</text>
				</template>
			</view>
		</view>
		<view class="u-flex u-p-b-14 u-p-t-14  u-border-top item-action-box" v-if="action">
			<view class="u-tips-color u-flex-1">
				{{detail.created_at_label}}
			</view>
			
			<!-- 退款状态，字段【is_out_price，1已退款2未退款】 -->
			<view class="u-m-l-16" v-if="detail.is_out_price == 1 && detail.status == 5 ">
				<u-button @click="toDetail" size="mini" shape="circle" class="btn-grey">已退款</u-button>
			</view>
			<view class="u-m-l-16" v-else-if="detail.is_out_price == 2 && detail.status == 5 ">
				<u-button @click="toDetail" size="mini" shape="circle" type="primary">未退款</u-button>
			</view>
			<view class="u-m-l-16" v-else>
				<u-button @click="toDetail" size="mini" shape="circle" class="btn-grey">查看详情</u-button>
			</view>
			
			
			<!-- status 状态【1-已取消2-待签约3-已签约4-过户中5-过户异常6-已成交】 -->
			<view class="u-m-l-16" v-if="pickerArray.length>1">
				<picker @change="bindPickerChange" :value="0" :range="pickerArray" range-key="label">
					<u-button style="pointer-events: none;" type="primary" size="mini" shape="circle">支付</u-button>
				</picker>
			</view>
			<view class="u-m-l-16" v-if="pickerArray.length == 1">
				<u-button @click="payOrder(pickerArray[0])" type="primary" size="mini" shape="circle">支付{{pickerArray[0].label}}</u-button>
			</view>
			<view class="u-m-l-16" v-if="detail.status == 5">
				<u-button @click="toDetail" type="primary" size="mini" shape="circle">查看原因</u-button>
			</view>
			<template v-if="detail.status != 1">
				<view class="u-m-l-16">
					<link-tel :link-user-type="2" :house-id="detail.house_id" :house-type="detail.house_type">
						<u-button style="pointer-events: none;"type="primary" size="mini" shape="circle">联系管家</u-button>
					</link-tel>
				</view>
			</template>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed,
		watch,
		onMounted,
		getCurrentInstance
	} from 'vue'

	const {
		proxy,
	} = getCurrentInstance()
	const {
		nav,
		navLogin,
		modal,
		uniRequestPayment
	} = proxy.$util;
	const emit = defineEmits(['refresh']);
	const props = defineProps({
		action: {
			type: Boolean,
			default: true,
		},
		from: {
			type: String,
			default: 'user', // user用户   guan管家中心
		},
		detail: {
			type: Object,
			default: {},
		}
	})
	const pickerArray = computed(() => {
		let arr = [];
		// 支付类型【2-支付定金4-支付服务费(租客)5-支付服务费(房东)】
		if (props.detail.is_need_pay_dingjin == 1) {
			arr.push({
				label: '定金',
				pay_type: 2,
				pay_price: props.detail.dingjin_price
			})
		}
		if(props.detail.order_user_type_id == 1 && props.detail.is_need_pay_buy_other_price == 1){
			arr.push({
				label: '剩余费用',
				pay_type: 7,
				pay_price: Number(props.detail.need_pay_buy_other_price) || 0
			})
		}
		if(props.detail.order_user_type_id == 2 && props.detail.is_need_pay_sell_other_price == 1){
			arr.push({
				label: '剩余费用',
				pay_type: 8,
				pay_price:Number(props.detail.need_pay_sell_other_price) || 0
			})
		}
		return arr
	})
	const bindPickerChange = (e) => {
		let data = pickerArray.value[e.detail.value];
		payOrder(data)
	}
	const payOrder = (data) => {
		let {
			label,
			pay_type,
			pay_price
		} = data;
		let title = '确定支付该订单的' + label + '：￥' + pay_price + ' ？';
		modal(title).then(() => {
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			proxy.$u.api.sellPayPrice({
				house_order_sn: props.detail.house_order_sn,
				pay_type,
				pay_price
			}).then(res => {
				let {
					code,
					msg,
					data
				} = res;
				if (code == 200) {
					let {
						pay_data,
						rent_house_order_sn
					} = data;
					if(msg == '微信支付未开通，测试阶段，模拟支付成功' || !pay_data){
						modal({
							content: msg,
							showCancel: false
						})
						emit('refresh');
						return;
					}
					uniRequestPayment(pay_data).then(res => {
						emit('refresh');
					}).catch(res => {

					})
					// emit('refresh');
					// modal({
					// 	content: msg,
					// 	showCancel: false
					// })
				} else {
					modal({
						content: msg,
						showCancel: false
					})
				}
			})
		}).catch(() => {

		})
	}
	const toDetail = () => {
		navLogin('/pagesSub/orderSellDetail/orderSellDetail', {
			sn: props.detail.house_order_sn
		})
	}
</script>

<style lang="scss" scoped>

</style>